<template>
  <div style="width: 100%">
    <!--查询表单-->
    <el-form :model="params">
      站点:
      <el-select v-model="params.siteId" style="width: 150px" placeholder="请选择站点">
        <el-option v-for="item in siteList" :key="item.siteId" :label="item.siteName" :value="item.siteId"></el-option>
      </el-select>
      页面类型:
      <el-select v-model="params.pageType" style="width: 150px" placeholder="请选择页面类型">
        <el-option v-for="item in pageTypeList" :key="item.pageType" :label="item.typeName" :value="item.pageType"></el-option>
      </el-select>
      页面名称:
      <el-input v-model="params.pageName" style="width: 150px"></el-input>
      页面别名:
      <el-input v-model="params.pageAliase" style="width: 150px"></el-input>
      <el-button type="primary" v-on:click="query" size="small">查询</el-button>
      <!-- router-link是vue提供的路由功能，用于在页面生成路由链接，最终在html渲染后就是<a>标签。-->
      <router-link class="mui-tab-item"
                   :to="{path:'/cms/page/add',query: {page: this.params.page,siteId: this.params.siteId}}">
        <el-button type="primary" size="small">新增页面</el-button>
      </router-link>
    </el-form>
    <el-table :data="list" stripe style="width: 100%">
      <el-table-column type="index" width="30"></el-table-column>
      <el-table-column prop="pageName" label="页面名称" width="120"></el-table-column>
      <el-table-column prop="pageAliase" label="别名" width="100"></el-table-column>
      <el-table-column prop="pageType" label="页面类型" width="120"></el-table-column>
      <el-table-column prop="pageWebPath" label="访问路径" width="230"></el-table-column>
      <el-table-column prop="pagePhysicalPath" label="物理路径" width="250"></el-table-column>
      <el-table-column prop="pageCreateTime" label="创建时间" width="200"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="page">
          <el-button size="small" type="text" @click="edit(page.row.pageId)">编辑</el-button>
          <el-button size="small" type="text" @click="del(page.row.pageId)">删除</el-button>
          <el-button @click="preview(page.row.pageId)" type="text" size="small">页面预览</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev,pager,next" :page-size="this.params.size" v-on:current-change="changePage"
                   :total="total" :current-page="this.params.page" style="float:right;"></el-pagination>
  </div>
</template>

<script>
  import * as cmsApi from '../api/cms';

  export default {
    data() {
      return {
        siteList: [], // 站点列表
        list: [],
        total: 50,
        params: {
          page: 1,//页码 size:2//每页显示个数 } } },methods:{ //分页查询
          size: 4,
          pageAliase: '',
          siteId: '',
          pageType: '',
          pageName: ''
        },
        pageTypeList: []
      }
    },
    mounted() {
      // 默认查询页面
      this.query();
      //初始化站点列表
      this.siteList = [
        {
          siteId: null,
          siteName: '全部'
        },
        {
          siteId: '5a751fab6abb5044e0d19ea1',
          siteName: '门户主站'
        },
        {
          siteId: '102',
          siteName: '测试站'
        }
      ];
      this.pageTypeList = [
        {
          pageType: null,
          typeName: '全部'
        },
        {
          pageType: 0,
          typeName: '静态'
        },
        {
          pageType: 1,
          typeName: '动态'

        }
      ]
    },
    methods: {
      changePage: function (page) {
        this.params.page = page;
        this.query()
      },
      //查询
      query: function () {
        // alert("查询");
        cmsApi.page_list(this.params.page, this.params.size, this.params).then((res) => {
          console.log(res)
          this.total = res.queryResult.total
          this.list = res.queryResult.list
        })
      },
      // 编辑
      edit: function (pageId) {
        this.$router.push({
          path: '/cms/page/edit/' + pageId, query: {
            page: this.params.page,
            siteId: this.params.siteId
          }
        })
      },
      // 删除
      del: function (pageId) {
        this.$confirm('确认删除此页面吗?','提示',{}).then(() => {
          cmsApi.page_del(pageId).then((res) => {
            if (res.success){
              this.$message({
                type: 'success',
                message: '删除成功'
              });
              // 重新加载页面
              this.query();
            }else {
              this.$message({
                type: 'error',
                message: '删除失败'
              });
            }
          });
        });
      },
      preview: function (pageId) {
        window.open("http://www.xuecheng.com/cms/preview/"+pageId);
      }
    },
    created() {
      this.params.page = Number.parseInt(this.$route.query.page || 1);
      this.params.siteId = this.$route.query.siteId || '';
    }
  }
</script>

<style scoped>

</style>
